import {
  clearRect
} from './rect.js';

// 编辑区dom
const control = document.querySelector('#control')
// 编辑区显示的图片dom
const controlImg = document.querySelector('#control img')
// 预览区dom
const display = document.querySelector('#display')
// 预览区显示的canvas dom
const canvas = document.querySelector('#display canvas')
const ctx = canvas.getContext('2d')
// 插入图片的dom
const insertImg = document.querySelector('#insert-img')
// 导出截图的dom
const exportClip = document.querySelector('#export-clip')
// 图片对象
let imgObj = null
// 最佳显示比例
let bestScale = 0
const methods = {
  /** ------ 图片上传模块 开始 ------ */
  doInput() {
    const inputObj = document.createElement('input');
    inputObj.addEventListener('change', this.readFile, false);
    inputObj.type = 'file';
    inputObj.accept = 'image/*';
    inputObj.click();
  },
  readFile() {
    const file = this.files[0]; // 获取input输入的图片
    if(!/image\/\w+/.test(file.type)){
        alert("请确保文件为图像类型");
        return false;
    } // 判断是否图片
    const reader = new FileReader();
    reader.readAsDataURL(file); // 转化成base64数据类型
    reader.onload = function(e){
      methods.drawToCanvas(this.result); // lve为当前实例
    }
  },
  drawToCanvas(imgData) {
    imgObj = new Image()
    controlImg.src = imgObj.src = imgData
    imgObj.onload = () => {
      bestScale = methods.calcBestScale(imgObj, control.offsetWidth, control.offsetHeight)
      // 图片按最佳比例展示
      controlImg.width = imgObj.width * bestScale
      controlImg.height = imgObj.height * bestScale
      // 外部盒子也按照最佳比例展示
      control.style.width = controlImg.width + 'px'
      control.style.height = controlImg.height + 'px'
    }
  },
  /** ------ 图片上传模块 结束 ------ */
  /**
   * 随机id
   */
  uuid() {
    let d = new Date().getTime();
    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      const r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid
  },
  /**
   * canvas转base64
   * @param {*} blob
   * @param {*} type
   * @param {*} name
   */
  blob2file(blob, type = 'png', name = '') {
    const fileName = name || this.uuid() + '.' + type
    const file = new File([blob], fileName, { type: blob.type, lastModified: Date.now() })
    return file
  },
  /**
   * 计算最佳的图片显示比例
   * @param {*} img
   * @param {*} deviceWidth
   * @param {*} deviceHeight
   * @returns 
   */
  calcBestScale(img, deviceWidth, deviceHeight) {
    return Math.min(deviceWidth / img.width, deviceHeight / img.height)
  },
  /**
   * 清除canvas
   */
  clearCanvas() {
    canvas && ctx.clearRect(0, 0, display.offsetWidth, display.offsetHeight)
  },
  /**
   * 生成图片
   * @param {*} src 
   */
  generateImg(rect) {
    if (!imgObj) return
    const {
      left,
      top,
      width,
      height
    } = rect
    const displayRect = {
      left: left / bestScale,
      top: top / bestScale,
      width: width / bestScale,
      height: height / bestScale
    }
    // 当截图矩形框宽度大于高度时，以预览区宽度为限制，高度按比例缩放
    if (displayRect.width >  displayRect.height) {
      canvas.width = display.offsetWidth
      canvas.height = display.offsetWidth * displayRect.height / displayRect.width
    // 当截图矩形框高度大于宽度时，以预览区高度为限制，宽度按比例缩放
    } else {
      canvas.height = display.offsetHeight
      canvas.width = display.offsetHeight * displayRect.width / displayRect.height
    }
    ctx.drawImage(imgObj, displayRect.left, displayRect.top, displayRect.width, displayRect.height, 0, 0, canvas.width, canvas.height)
  }
}
/** 点击插入图片触发逻辑 */
insertImg.addEventListener('click', () => {
  clearRect()
  methods.doInput()
})

/** 点击导出截图触发逻辑 */
exportClip.addEventListener('click', () => {
  if (canvas) {
    // 创建一个 a 标签，并设置 href 和 download 属性
    const el = document.createElement('a');
    // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
    el.href = canvas.toDataURL('image/png', 1.0);
    el.download = '截图.png';
    // 创建一个点击事件并对 a 标签进行触发
    const event = new MouseEvent('click');
    el.dispatchEvent(event);
  }
})

export {
  methods
}